<!--<template>
  <WaterMark :watermarkConfig="config">
      <p>
        Single page apps are different from what you must have been used to while building a canonical web app. SPAs for short, are, unlike normal web pages, loaded in on a single URL endpoint. The endpoint is usually the root /.
      </p>
      <p>
        Single page does not mean they have only one view for the user to interact with. It just means that the server only sends a single real route/page and the client takes the routing onwards.
      </p>
      <p>
        This section will guide you through setting up and building Vue apps with client routes.
      </p>
  </WaterMark>
</template>-->

<template>
  <div class="box">
    <WaterMark :watermarkConfig="config1">
      <p>Some text...</p>
    </WaterMark>
    <WaterMark :watermarkConfig="config2">
      <p>Yet another text...</p>
    </WaterMark>
  </div>
</template>

<script>
import WaterMark from './components/index.js'

export default {
  name: 'app',
  components: {
    WaterMark
  },
  data () {
    return {
      config: {
        text: 'Hello～',
      }
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.box {
  margin: 2em auto;
  width: 800px;
  height: 500px;
}
</style>
